<template>
  <div>
    <h3>{{position}}首页</h3>
    <el-card>
      <el-row :gutter="20">
        <div style="display: flex; justify-content: space-around; margin: 20px auto">
          <section>
            <div @click="routeTo('audit')" v-show="position=='审核员'" class="transition-box" ><i class="iconfont icon-icon__huoquyuansushuliang"></i>待审核数量: {{detailList.waitingAuditCount}}</div>
            <div @click="routeTo('/indextext')" v-show="position=='经办人'" class="transition-box" ><i class="iconfont icon-icon__huoquyuansushuliang"></i>可用指标文数量: {{detailList.availableZwbCount}}</div>
          </section>
          <section >
            <div @click="routeTo('audit','驳回')" v-show="position=='审核员'" style='background-color: #ff3333' class="transition-box"><i class="iconfont icon-jujueshenpi"></i>当前驳回数量: {{detailList.rejectedCountThisMonth}}</div>
            <div @click="routeTo('/find')" v-show="position=='经办人'"  :state="detailList.currentState" class="transition-box"><i class="iconfont icon-jihuozhuangtai"></i>当前补贴状态: {{detailList.currentState}}</div>
          </section>
        </div>
      </el-row>
      <el-row :gutter="20">
        <div style="display: flex; justify-content: space-around; margin: 20px auto">
          <template name="el-fade-in-linear">
            <div @click="routeTo('audit','通过')" v-show="position=='审核员'" style='background-color: #33ff00' class="transition-box"><i class="iconfont icon-yishenhe"></i>本月审核数: {{detailList.auditCountThisMonth}}</div>
            <div @click="routeTo('/indextext')" v-show="position=='经办人'" style='background-color: #33ff00' class="transition-box"><i class="iconfont icon-quanbuyue"></i>指标文总余额: {{detailList.availableZwbAmount}}￥</div>
          </template>
          <template name="el-fade-in">
            <div @click="routeTo('audit','通过')" v-show="position=='审核员'" style='background-color: #33ff00' class="transition-box"><i class="iconfont icon-yishenhe"></i>本年审核数: {{detailList.auditCountThisYear}}</div>
            <div @click="routeTo('/find', 'history')" v-show="position=='经办人'" style='background-color: #33ff00' class="transition-box"><i class="iconfont icon-shuliangtongji"></i>历史申领次数: {{detailList.historyApplicationCount}}</div>
          </template>
        </div>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 登录人姓名，职位
      position: '',
      username: '',
      // 公积金账号，即单位
      gjjzh: '',
      // 经办人或审核人的首页数据
      detailList: '',
      testPic: ''
    }
  },
  async mounted() {
    // window.sessionStorage.setItem('username',"shenheyuan1");
    // window.sessionStorage.setItem('position',"shenhe");
    this.username = window.sessionStorage.getItem('username');
    this.position = window.sessionStorage.getItem('position');
    this.gjjzh = window.sessionStorage.getItem('gjjzh');
    this.getDetailList()
  },
  methods: {
    async getDetailList() {
      if (this.position == '审核员'){
        const {data: { data:res, code}} = await this.$http.get('/audit/getAuditStatic?auditorUsername='+this.username)
        // console.log(res);

        this.detailList = res;
        if (code !== 200) return this.$message.error('信息获取失败');
        return this.$message.success('信息获取成功');
      } else {
        const {data: { data:res, code}} = await this.$http.get('/allowance/getAgentStatic?gjjzh='+this.gjjzh)
        console.log(res);
        this.detailList = res;
        if (code !== 200) return this.$message.error('信息获取失败');
        return this.$message.success('信息获取成功');
      }
    },
    routeTo(path, stateInfo) {
      this.$router.push({path, query:{ stateInfo }})
    }
  }
}
</script>
<style lang='less' scoped>
  .transition-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    width: 500px;
    height: 150px;
    border-radius: 15px;
    background-color: #409EFF;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 90px;
    cursor: pointer;
    transition: all 0.5s;
    &:hover {
      transform: scale(1.15);
    }
  }

  .iconfont {
    display: flex;
    font-size: 70px;
    font-weight: normal;
    margin-left: 40px;
    margin-right: 50px;
  }

  // 处理一下经办人补贴状态盒子颜色
  div {
    [state="暂存"]  {
      background-color: #ff9900;
    }
    [state="已提交"]  {
      background-color: #409EFF;
    }
    [state="驳回"]  {
      background-color: red;
    }
    [state="通过"]  {
      background-color: #33ff00;
    }
  }

</style>
